<!--
!组件注册：Vue 的模板系统需要知道哪些组件可以在模板中使用。注册的过程可以是全局的，也可以是局部的

!注册的方式决定了组件的可见范围:
  全局注册：注册的组件可以在项目中任何地方使用，无需重复导入
  局部注册：组件仅能在注册它的父组件模板中使用

!全局注册：在全局注册中，组件在项目启动时一次性注册到 Vue 的全局实例中。任何地方都可以直接在模板中使用这些组件。
特点：
  在 main.ts 文件中进行注册
优点：
  1、便捷：无需重复导入和注册。
  2、适合被频繁使用的通用组件（例如按钮、模态框）。
缺点：
  1、容易造成命名冲突。
  2、如果项目组件较多，可能增加全局命名空间的复杂性。

!局部注册：局部注册仅在当前组件中使用，需显式导入并在 components 中声明。
特点：
  在一个父组件中导入并注册：
优点：
  1、清晰：只在需要的地方注册，避免不必要的全局污染。
  2、模块化：组件的作用范围更明确。
缺点：
  1、使用起来稍显冗长，需要在每个使用的父组件中导入和注册。

!使用场景：
  全局注册适用于：
    1、项目中多个地方重复使用的通用组件。
    2、较小的项目，组件数量较少，管理简单。
  局部注册适用于：
    1、复杂项目，组件数量较多，命名冲突风险高。
    2、特定的业务逻辑组件，仅在某些页面使用。
-->
<template>
  <div id="wrap">
    <h1>组件注册和引入</h1>
    <!-- 组件注册:全局注册 -->
    <h3>全局注册的组件加载</h3>
    <StuDemo4></StuDemo4>
    <MyComponent3></MyComponent3>

    <!--  组件注册:局部注册 -->
    <h3>局部注册的组件加载</h3>
    <StuDemo1></StuDemo1>
  </div>
</template>

<script lang="ts">
export default {
  name: 'dayStuDemo37',
  //局部注册，父组件注册
  components: {
    StuDemo1,
  },
};
</script>

<script lang="ts" setup>
// import { ref } from 'vue';
// 局部组件的导入StuDemo1，
import StuDemo1 from '../day20241211/StuDemo1.vue';
</script>

<style lang="scss"></style>
